<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义form表单控件</title>
    <link href="css/index.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="js/index.js"></script>
</head>
<body>


<dl>
    <form action="http://www.baidu.com" method="get">
        <dt>填写基本信息</dt>
        <dd><input id="name" name="name" type="text" class="text" value="尊姓大名" /></dd>
        <dd><input id="contact" name="contact" type="text" class="text" value="联系QQ或MSN" /></dd>
        <dd style="z-index: 2;">
            <div id="btn_come_from_drop_down" class="select_normal"></div>
            <input id="come_from" name="come_from" type="text" class="text" value="你来自哪里？" />
            <ul id="come_from_drop_down" class="area">
                <li class="active">北京</li>
                <li>上海</li>
                <li>杭州</li>
                <li>深圳</li>
                <li>妙味课堂</li>
                <li>乌鲁木奇</li>
                <li>哈尔滨</li>
                <li>天津</li>
                <li>湖北</li>
                <li>海南</li>
            </ul>
        </dd>
        <dd class="clear">
            <input id="gender" name="gender" type="hidden" />
            <h2>性别</h2>
            <ul class="sex">
                <li id="gender_man" title="男" class="men_active"></li>
                <li id="gender_woman" title="女" class="woman_normal"></li>
            </ul>
        </dd>
        <dd class="clear">
            <input id="hobby" name="hobby" type="hidden" />
            <h2>爱好</h2>
            <ul id="hobby_drop_down" class="hobby">
                <li>上网</li>
                <li>看电影</li>
                <li>游泳</li>
                <li>打篮球</li>
                <li>唱歌</li>
                <li>旅游</li>
            </ul>
        </dd>
        <dd>
            <h2>就这样！</h2>
            <div class="btn"><input type="submit" value="提交" /></div>
        </dd>
    </form>
    <h5><a href="http://www.miaov.com">妙味课堂 - www.miaov.com</a></h5>
</dl>

</body>
</html>